<template>
    <div style="padding: 2px 20px;background-color: #fff;width: 99%;margin: 5px auto 0px">
      <DynamicForm :labelWidth="85" style="margin-top: 20px;" :searchloading="loading" :items="items" v-model="formModel" @onFinish="submit">
      </DynamicForm>
      <div style="margin-top: 20px;">
        <ElTableWithColumns @onChange="onChange" :loading="loading" :data="tableData" :columns="columns" :pagerInfo="pagerInfo">
          <template #operate="{row}">
            <el-space>
              <el-tag type="primary" style="cursor: pointer;" v-hasPermi="['payment:task:query']" @click="viewDetail(row as TaskInfo,1)">详情</el-tag>
              <el-tag type="success" style="cursor: pointer;"   v-hasPermi="['payment:task:serviceCheck']"  v-if="row.taskStatus == 2 && row.sydVerifyStatus == 1" @click="verify(row)">审核</el-tag>
            </el-space>
          </template>
        </ElTableWithColumns>
      </div>
      <Detail  :openCheck="openDetailCheck" @dialogClose="dialogClose2" :item="item"></Detail>
      <CheckWin  ref="CheckWinD" :title="CheckWinPro.title" :openCheck="CheckWinPro.openCheck" :id="CheckWinPro.id" :item="CheckWinPro.item" @dialogClose="checkWinClose"  @dialogSubmit="checkWinSubmit"></CheckWin>
    </div>
  </template>

  <script lang="ts" setup>
  import DynamicForm from '@/components/DynamicForm/index.vue';
  import { HttpStatus } from '@/enums/RespEnum';
  import MultifunctionalModal from '../SharedComponents/MultifunctionalModal.vue';
  import { ActionEnum } from '../types.js'
  import useDictUtilsStore from '@/store/modules/dict_utils'
  import BiddersModal from '../projectReceving/BiddersModal.vue';
  import {taskCheckList} from "@/api/projectMgt/proCheck/index";
  import Detail from "@/views/project/proSel/detail/index.vue"
  import CheckWin from "@/components/customDialog/check/index.vue"
  import { TaskInfo } from '../types'

  const { getlabel } = useDictUtilsStore()

  const open = ref(false)
  const selectedTaskId = ref('')
  const CheckWinPro = ref({
        title:"项目转包审核",
        openCheck:false,
        id:null,
        item:null
  })
  const CheckWinD = ref();

  const pagerInfo = reactive({
    pageSize: 10,
    total: 0,
    pageNum: 1
  })

  const { proxy } = getCurrentInstance() as ComponentInternalInstance

  const openDetailCheck = ref(false)
  const item = ref({})

  const viewDetail = (row: TaskInfo,tag:Number) => {
    if(tag == 1){
      openDetailCheck.value = true;
    }
    item.value = row;
  // router.push (`/project/projectDetail?id=${row.id}`)
}


const dialogClose2  = (params:any)=>{
    openDetailCheck.value = false;
}

const checkWinClose = (params:any)=>{
    CheckWinPro.value.openCheck = false;
}


const checkWinSubmit = async (pa:any)=>{
    let params = {
        sydVerifyStatus: pa.checkType == '2'?3:2 ,
        id:pa.id,
        sydVerifyReason:pa.remarer,
        classify:pa.item.classify
    }

    const { response } = await useRequest('/payment/task/check', 'PUT', {
      data: params
    }, { immediate: true })

    if (response?.value?.code === HttpStatus.SUCCESS) {
      CheckWinPro.value.openCheck = false;
      ElMessage.success(response?.value?.msg);
      CheckWinD.value.hideLoad();
      query();
    }else{
        CheckWinD.value.hideLoad();
    }
}


  /**
   * 接单类型
  */
  const taskTypeOptions = computed(() => {
    const list = proxy?.useDict("task_type").task_type
    return list
  })

  /**
   * 业务类型
  */
  const businessTypeOptions = proxy?.useDict("wxfe_bus_type").wxfe_bus_type

  /**
   * 项目状态
  */

  const {task_status} =  toRefs<any>(proxy?.useDict("task_status"));


  /**
   * 上下架
  */
  const proStatusoptions = proxy?.useDict("pro_status").pro_status


  const loading = ref(false)

  const tableData = ref([])



  const columns = [
    {
      title: '创建时间',
      dataIndex: 'addTime',
      width: 160
    },
    {
      title: '企业名称',
      dataIndex: 'merchantName',
      width: 160
    },
    {
      title: '服务商名称',
      dataIndex: 'gsmc',
      width: 220
    },
    {
      title: '项目编号',
      dataIndex: 'no',
      width: 140
    },
    {
      title: '项目标题',
      dataIndex: 'name',
      width: 150
    },
    {
      title: '服务金额（元）',
      dataIndex: 'taskCode',
      renderText: (row: TaskInfo) => {
        const {costMax,classify} = row
        if(classify == 1){
            return proxy?.convertFenToYuan(row.cost) +" ~ "+ proxy?.convertFenToYuan(row.costMax);
        }else{
            return `${proxy?.convertFenToYuan(row.cost)}`
        }
        },
      width: 140
    },
    {
      title: '接单类型',
      dataIndex: 'classify',
      width: 120,
      renderText: row => {
           return getlabel('task_type', row.classify)
      }
    },
    {
      title: '业务类型',
      dataIndex: 'busType',
      width: 160,
      renderText: row => {
           return getlabel('wxfe_bus_type', row.busType)
      }
    },
    {
      title: '项目状态',
      dataIndex: 'taskStatus',
      width: 160,
      renderText: row => {
           return getlabel('task_status', row.taskStatus)
      }

    },
    {
      title: '上架状态',
      dataIndex: 'status',
      width: 160,
      renderText: row => {
          return getlabel('pro_status', row.status)
      }
    },
  ]


  const formModel = ref({})


  const items = computed(() => {
    return [
      { prop: 'addTime1', label: '创建时间', valueType: 'date', fieldProps: { type: 'daterange','start-placeholder':"开始日期",'end-placeholder':"结束日期"}},
      { prop: 'no', label: '项目编号', valueType: 'input' , fieldProps: {placeholder:"请输入项目编号"}},
      { prop: 'name', label: '项目标题', valueType: 'input' , fieldProps: {placeholder:"请输入项目标题"}},
      { prop: 'merName', label: '企业名称', valueType: 'input' },
      { prop: 'taskStatus', label: '项目状态', valueType: 'select', options: task_status?.value },
      { prop: 'classify', label: '接单类型', valueType: 'select', options: taskTypeOptions?.value },
    ]
  })

  const verifyMdodal = ref<{ onVerify?: (data: TaskInfo) => void }>()

  const verify = (row) => {
    // verifyMdodal?.value?.onVerify!(row)
    CheckWinPro.value.openCheck = true;
    CheckWinPro.value.id = row.id;
    CheckWinPro.value.title = row.no+"项目转包审核";
    CheckWinPro.value.item = row;
  }

  const queryParams = ref({});

  const queryList = (formData = {})=>{
    const submitData = {
      ...formData,
      ...pagerInfo,
      beginDate:null,
      endDate:null
    }
    submitData.pageNum = 1;
    if( formData.addTime1 && formData.addTime1.length > 1 ){
        submitData.beginDate = formData.addTime1[0].Format('yyyy-MM-dd');
        submitData.endDate = formData.addTime1[1].Format('yyyy-MM-dd');
    }
    queryParams.value = submitData;
    query();
  }

  const query = async (formData = {}) => {
    loading.value = true

    taskCheckList(queryParams.value).then(res=>{
        if(res.code == 200){
            tableData.value = res.rows;
            pagerInfo.total = res.total;
            loading.value = false;
        }
    });


    // const { response } = await useRequest('/payment/task/checkList', 'GET', {
    //   params: submitData
    // }, { immediate: true })
    // if (response.value.code === 200) {
    //     tableData.value = response.value.rows
    //     pagerInfo.total = response.value.total
    // }

    // loading.value = false
    // if (err) {
    //   ElMessage.error('获取列表失败')
    // } else {
    //   const { code } = res
    //   if (code === HttpStatus.SUCCESS) {
    //     tableData.value = res?.result?.records
    //     pagerInfo.total = res.result?.total
    //   }
    // }
  }

  const onSuccess = () => {
    open.value = true
    query()
  }
  const onFinish = (response) => {
    if (response.value.code === 200) {
      // ElMessage.success('操作成功')
      query()
    }
  }


  const onChange = ({data, type}) => {
    if (type === 'pageNo') {
        queryParams.value.pageNum = data
    }
    if (type === 'pageSize') {
        queryParams.value.pageSize = data
    }
    query()
  }

  const submit = data => {
    queryList(data)
  }

  onMounted(() => {
    queryList()
  })
  </script>
  <style>

  .el-dialog__header{
    border-bottom: 1px solid #e8e8e8;
    padding-bottom:15px;
    margin-right:0;
  }

  .el-dialog__footer{
     border-top: 1px solid #e8e8e8;
  }


  .demo-form-inline .el-input {
    --el-input-width: 220px;
  }

  .demo-form-inline .el-select {
    --el-select-width: 220px;
  }
  </style>
